<template>
	<view class="articleActionUseIndex">
		<view class="views">
			<!-- 观看 -->
			<text class="number">{{ item.views }}次浏览</text>
		</view>
		<view class="comment">
			<!-- 评论 -->
			<text class="iconfont icon-daipingjia"></text>
			<text class="number">{{ item.comments }}</text>
		</view>
		<view class="like">
			<!-- 点赞 -->
			<text :style="{ color: item.like_status ? 'pink' : 'black' }" class="iconfont icon-xihuan" @click="click_like(item.pk)"></text>
			<text class="number">{{ item.likes }}</text>
		</view>
		<view class="share">
			<!-- 分享 -->
			<button class="iconfont icon-fenxiang1 btn" :id="index" @click="share" open-type="share"></button>
			<text class="number">{{ item.shares }}</text>
		</view>
	</view>
</template>

<script>
	import {
		throttle
	} from "../../utils/DebouchAndThrottl.js"
	export default {
		name: 'articleActionUseIndex',
		props: ['item', 'index'],
		data() {
			return {};
		},
		methods: {
			click_like: throttle(function(pk) {
				this.$emit("click_like", pk)
			}, 500)

		}
	};
</script>

<style lang="scss" scoped>
	.articleActionUseIndex {
		width: 100%;
		align-items: center;
		padding: 20rpx 0;
		justify-content: space-between;

		.share,
		.comment,
		.like,
		.views {
			align-items: center;
		}

		.iconfont {
			font-size: 50rpx;
		}

		.number {
			font-size: 28rpx;
			padding-left: 10rpx;
		}

		.share {
			button::after {
				border: none;
			}

			button {
				padding: 0;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 50rpx;
				background-color: #fff;

			}
		}
	}
</style>
